<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 130px;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
        // 多个动画   每次循环开启一个定时器  
        // 如何捕捉每个定时器结束了
        //准备一个计数器
        //每循环一次开一个定时器   计数器加1 
        //当定时器结束   计数器 -1 
        
        // 当计数器 为0  那么 代表 所有的定时器全部结束 


        function move(ele, obj) {
            let count = 0; //总的计数器  放到循环外边 
            for (let k in obj) {
                count++;
                const mystyle = k; // let变量值可以修改 
                let target = obj[k]; // const 常量  里边的值不可以修改 
                if (mystyle === 'opacity') {
                    target *= 100;
                }
                const num = setInterval(function () {
                    // 放到定时器里边 就可以拿到它新的位置  
                    let init;
                    if (mystyle === 'opacity') {
                        init = window.getComputedStyle(ele)[mystyle] * 100
                    }
                    else {
                        init = parseInt(window.getComputedStyle(ele)[mystyle])
                    }
                    // 记录新的运动距离
                    let duration = (target - init) / 10;
                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration)
                    // console.log(duration);
                    if (init === target) {
                       
                        clearInterval(num);
                        count--;
                        if(count==0){
                            console.log('所有的定时器全部结束');
                        }
                       
                        
                    } else {
                        if (mystyle === 'opacity') {
                            ele.style[mystyle] = (init + duration) / 100;
                        }
                        else {
                            ele.style[mystyle] = init + duration + 'px';
                        }

                    }
                }, 30);
            }
        }


        var divele = document.querySelector('div');
        divele.onclick = function () {
            move(this, { 'left': 500,width:666,'opacity': 0.3 });

        }
    </script>

</body>

</html>